<script setup>
  import { ref } from 'vue'

  const props = defineProps({
    data: { type: Array, required: true },
    columns: { type: Array, required: true },
  })

  const loading = ref(false)

  /**
   * 传入一个Promise，自动进行表格的loading状态控制
   * @param promise {Promise}
   */
  const load = promise => {
    loading.value = true
    const done = () => (loading.value = false)
    return promise.then(done, done)
  }

  defineExpose({ load })
</script>

<template>
  <el-table v-bind="$attrs" :data="props.data" :border="true" v-loading="loading">
    <el-table-column v-for="col in props.columns" :key="col.prop" v-bind="col">
      <template #default="{ row }">
        <!-- 用 col.prop 而不是 col.key -->
        <slot :name="col.prop" :row="row" :value="col.filter ? col.filter(row[col.prop]) : row[col.prop]">
          {{ (col.filter ? col.filter(row[col.prop]) : row[col.prop]) ?? '-' }}
        </slot>
      </template>
    </el-table-column>
    <slot></slot>
  </el-table>
</template>
